<!-- -->
<template>
  <div id='register'>
    <div class="tradetop">注册账号</div>
    <!-- 我要挂卖 -->
    <div class="tradesell">
        <div class="message">
            <ul>
                <li>会员名：&emsp;&emsp;<input type="text" v-model="name" @blur="ispass1" placeholder="请输入会员名">&emsp;<span>* 会员名只能以字母开头。且仅可使用字母、汉字和数字。</span></li>
                <li>电子邮箱：&emsp;<input type="text" v-model="email" @blur="ispass2" placeholder="请输入电子邮箱">&emsp;* 请与会员确认邮箱，设定后不可更改，用于忘记密码验证。</li>
                <li>登录密码：&emsp;<input type="password" v-model="loginword" @blur="ispass3" placeholder="请设置你的登录密码"></li>
                <li>安全密码：&emsp;<input type="password" v-model="safeword" @blur="ispass4" placeholder="请设置你的安全密码">&emsp;* 安全密码和登录密码不可一致。</li>
                <li>*节点会员：&emsp;<input type="text" :disabled='checked' v-model="person" @blur="ispass5" placeholder="请输入节点会员用户名"></li>
                <li>
                    <div class="choice">节点位置：
                        <label class="radio">左区<input :disabled='checked1' v-model="jiedian" type="radio" name="radio" value="1"><i></i></label>
                        <label class="radio">右区<input :disabled="checked1" v-model="jiedian" type="radio" name="radio" value="2"><i></i></label>
                    </div>
                </li>
                <li>*直推会员：&emsp;<input type="text" v-model="member" @blur="ispass6" placeholder="请输入直推会员用户名"></li>
                <li>
                    <div>会员等级：&nbsp;&nbsp;  
                        <select class="openup" v-model="selected1">
                            <option value="index"  v-for="(item,index) in rank" :value="item.rank_money" :key="index">{{item.rank_money}}</option>
                            <!-- <option value="2">{{item}}</option> -->
                        </select>
                    </div>
                </li>
                <li v-show="baodan==='2'">
                    <div>开通状态：&nbsp;&nbsp;   
                    <select class="openup" v-model="selected2">
                        <!-- <option disabled value="">{{selected2}}</option> -->
                        <option value="1">立即开通</option>
                        <option value="2">稍后开通</option>
                    </select>
                    </div>
                    <div><p>&emsp;* 立即开通：确定激活后将扣除相应级别的注册币及激活码。</p><p>&emsp;稍后开通：将扣除相应级别的注册币，激活时扣除相应级别的激活码。</p> 
                    </div>
                </li>
                <li v-show="baodan==='1'">*报单中心：&emsp;<input type="text" v-model="baodanname"  placeholder="请输入报单中心用户名"></li>
            </ul>
        </div>
        <div class="btn">
            <button @click="verification">确定注册</button>
            <!-- <button>取消</button> -->
            <p>*确定激活后将扣除相应级别的注册币及激活码。</p>
        </div>
    </div>
  </div>
   



</template>

<script>
export default {
  name: 'register',
  data () {
    return {
        checked: false,
        checked1: false,
        jiedian: '1',
        name: '',      
        email: '',
        loginword: '',
        safeword: '',
        member: '',
        person: '',
        baodanname: '',
        selected1: '100',
        selected2: '1',
        baodan: sessionStorage.getItem('type'),
        rank: [],
        lay: this.$route.query.lay,
        id: this.$route.query.id,
    };
  },
  created () {
    console.log(this.baodan);
    // this.baodan = sessionStorage.getItem('type');
    if (this.lay) {
      console.log(1);
    //团队管理注册
      if (this.baodan === '2') {
    //报单中心注册
      this.loadBaodan();
      } else if (this.baodan === '1') {
      //普通注册
        this.loadPutong();    
      }
    } else {
      console.log(2);
    //正常注册
      if (this.baodan === '2') {
      //报单中心注册
        this.loadBaodan1();
      } else if (this.baodan === '1') {
      //普通注册
        this.loadPutong1();    
      }    
    }
  },
  methods: {
    // 团队管理进入注册
   loadBaodan () {
    this.axios.post('User/center_reg',{
      id: this.id,
      lay: this.lay
    })
    .then(({data})=> {
        console.log(data);
        this.rank = data.rank;
        this.person = data.jie_name;
        this.jiedian = data.lay;
        this.checked = "true";
        this.checked1 = "true";
    })
    .catch(function (error) {
      console.log(error);
    });
   },
   loadPutong () {
    this.axios.post('User/fu_reg',{
      id: this.id,
      lay: this.lay
    })
    .then(({data})=> {
        console.log(data);
        this.rank = data.rank;
        this.person = data.jie_name;
        this.jiedian = data.lay;
        this.checked = "true";
        this.checked1 = "true";
    })
    .catch(function (error) {
      console.log(error);
    });
   },
  //  正常注册
  loadBaodan1 () {
    this.axios.post('User/center_reg')
    .then(({data})=> {
        console.log(data);
        this.rank = data.rank;
    })
    .catch(function (error) {
      console.log(error);
    });
   },
   loadPutong1 () {
    this.axios.post('User/fu_reg')
    .then(({data})=> {
        console.log(data);
        this.rank = data.rank;
    })
    .catch(function (error) {
      console.log(error);
    });
   },
   verification () {
      // console.log(this.selected1);
      let regTel = /^[a-zA-Z][A-Za-z0-9\u4e00-\u9fa5]+$/;
	    if (!this.name) {
        this.$message({message: '用户名不能为空',type: 'error'}); 
      } else if (!regTel.test(this.name)){
        this.$message({message: '请输入以字母开头用户名',type: 'error'});       
      } else if (!this.loginword){
        this.$message({message: '密码不能为空',type: 'error'});       
      } else if (!/^.{6,20}$/.test(this.loginword)) {
        this.$message({message: '请输入6-20位登录密码',type: 'error'});       
      } else {
        // this.open2();
        if (this.baodan === '2') {
        //报单中心注册
           this.axios.post('User/center_reg_cl',{
             email: this.email,
             name: this.name,
             password: this.loginword,
             user_password: this.safeword,
             rank: this.selected1, //等级
             parent_name: this.member, //直推会员
             site: this.jiedian, //节点位置
             jie_name: this.person, //节点会员
             zhuangtai: this.selected2 //是否开通
           })
            .then(({data})=> {
              console.log(data);
              if (data.status === '1') {
                this.$message({message: '注册币不足',type: 'error'});    
              } else if (data.status === '2') {
                this.$message({message: '没有该推荐会员',type: 'error'});                     
              } else if (data.status === '3') {
                this.$message({message: '没有该节点会员',type: 'error'});                    
              } else if (data.status === '4') {
                this.email = '',
                this.name = '',
                this.loginword = '',
                this.safeword = '',
                this.member = '',
                this.jiedian = '',
                this.person = '',
                this.$message({message: '注册成功',type: 'success'});                    
              } else if (data.status === '5') {
                this.$message({message: '注册失败',type: 'error'});                    
              } else if (data.status === '6') {
                this.$message({message: '激活币不足',type: 'error'});                    
              } else if (data.status === '7') {
                this.$message({message: '用户名已存在',type: 'error'});                    
              } else if (data.status === '8') {
                this.$message({message: '该邮箱已被占用',type: 'error'});                    
              } else if (data.status === '9') {
                this.$message({message: '该区下已有人员',type: 'error'});                    
              }
              })
              .catch(function (error) {
                console.log(error);
              });
        } else if (this.baodan === '1') {
        //普通注册
           this.axios.post('User/fu_reg_cl',{
             email: this.email,
             name: this.name,
             password: this.loginword,
             user_password: this.safeword,
             rank: this.selected1, //等级
             parent_name: this.member, //直推会员
             site: this.jiedian, //节点位置
             jie_name: this.person, //节点会员
             jihuo_user: this.baodanname //报单用户名
           })
            .then(({data})=> {
              console.log(data);
              if (data.status === '1') {
                this.$message({message: '注册币不足',type: 'error'});    
              } else if (data.status === '2') {
                this.$message({message: '没有该推荐会员',type: 'error'});                     
              } else if (data.status === '3') {
                this.$message({message: '没有该节点会员',type: 'error'});                    
              } else if (data.status === '4') {
                this.email = '',
                this.name = '',
                this.loginword = '',
                this.safeword = '',
                this.member = '',
                this.jiedian = '',
                this.baodanname = '',
                this.$message({message: '注册成功',type: 'success'});                    
              } else if (data.status === '5') {
                this.$message({message: '注册失败',type: 'error'});                    
              } else if (data.status === '6') {
                this.$message({message: '用户名已存在',type: 'error'});                    
              } else if (data.status === '7') {
                this.$message({message: '该邮箱已被占用',type: 'error'});                    
              } else if (data.status === '8') {
                this.$message({message: '该区下已有人员',type: 'error'});                    
              } else if (data.status === '10') {
                this.$message({message: '没有该报单中心',type: 'error'});                    
              }
              })
            .catch(function (error) {
              console.log(error);
            });
        }
	 }			
    }, 
    ispass1 () {
      if (!this.name) {
        this.$message({message: '用户名不能为空',type: 'error'});       
      } 
    },
    ispass2 () {       
      if (!(this.email)) {
        this.$message({message: '请输入邮箱',type: 'error'});       
      }
    },
    ispass3 () {       
      if (!(this.loginword)) {
        this.$message({message: '登录密码不能为空',type: 'error'});       
      }
    },
    ispass4 () {       
      if (!(this.safeword)) {
        this.$message({message: '登录密码不能为空',type: 'error'});       
      } else if(this.loginword === this.safeword) {
        this.$message({message: '安全密码和登录密码不可一样',type: 'error'});       
      }
    },
    ispass5 () {       
      if (!(this.person)) {
        this.$message({message: '请输入节点会员',type: 'error'});       
      }
    },
    ispass6 () {       
      if (!(this.member)) {
        this.$message({message: '请输入直推会员',type: 'error'});       
      }
    },
    open2() {
     this.$message({
       message: '操作成功',
       type: 'success'
      });
    this.number = '';
    this.charge = '';
    this.password = '';
    }
  }
}
</script>
<style lang='scss' scoped>
#register {
 .tradetop {
    width: 100%;
    height: 55px;
    line-height: 65px;
    font-size:13px;
    font-family:MicrosoftYaHei-Bold;
    color:rgba(0,0,0,1);
    font-weight: 700;
    padding-left: 25px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(153,153,153,1);
 }
 .tradesell {
   .warning {
    width: 550px;
    margin-top: 15px; 
    margin-left: 25px;  
    margin-bottom: 30px;
    padding-left: 5px; 
    font-size:11px;
    font-family:MicrosoftYaHei;
    color:rgba(0,0,0,1);
    background:rgba(255,247,230,1);
    border-radius:2px;
    line-height: 31px;
    border:1px solid rgba(224,3,0,1);
 }
 .message {
     margin-left: 40px;
     margin-top: 10px;
     li {
        line-height: 50px;
        font-size:12px;
        font-family:MicrosoftYaHei;
        color:rgba(102,102,102,1);
     }
     input {
        width:209px;
        height:33px;
        padding-left: 5px;
        border-radius:2px;
        border:1px solid rgba(151,151,151,1);
     }
     li:nth-of-type(8),
     li:nth-of-type(9) {
         display: flex;
         justify-content: flex-start;
         p {
            line-height: 20px;
            font-size:12px;
            font-family:MicrosoftYaHei;
            color:rgba(102,102,102,1);
         }
        .openup {
        width:216px;
        height:35px;
        padding-left: 5px;
        border-radius:2px;
        border:1px solid rgba(151,151,151,1);
        }
        span {
        font-weight: 700;
        }
     }
    .choice{
	 position: relative;
    }
    .choice .radio{
        position: relative;
        display: inline-block;
        font-weight: 400;
        color:rgba(102,102,102,1);
        padding-left: 30px;
        cursor: pointer;
    }
    .choice .radio input{
        position: absolute;
        left: -9999px;
    }
    .choice .radio i{
        display: block;
        position: absolute;
        top: 16px;
        left: 8px;
        width: 15px;
        height: 15px;
        outline: 0;
        border: 1px solid rgba(153,153,153,1);
        border-radius: 50%;
        transition: border-color .3s;
        -webkit-transition: border-color .3s;
    }
    .choice .radio input+i:after{
        position: absolute;
        content: '';
        top: 3px;
        left: 3px;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background-color: rgba(224,3,0,1);
        opacity: 0;
        transition: opacity .1s;
        -webkit-transition: opacity .1s;
    }
    .choice .radio input:checked+i:after{
        opacity: 1;
    }
 }
 .btn {
    margin-top: 50px;
    margin-left: 40px;
    button {
     cursor: pointer;
     width:82px;
     height:33px;
     background:rgba(224,3,0,1);
     font-size:12px;
     font-family:MicrosoftYaHei;
     color:rgba(255,255,255,1); 
     border-radius:2px;
    }
    button:nth-of-type(2) {
     margin-left: 25px;
     background:rgba(225,225,225,1);
     color:rgba(0,0,0,1);
    }
    p {
     font-size:11px;
     font-family:MicrosoftYaHei;
     color:rgba(102,102,102,1);
     line-height: 30px;
    }  
  }
 }
}
</style>